// ---------------------------------------------------------------------------- generic panel list items

%info-section {
    border-radius: 3px;
    border: 1px solid fade-out($layout-border-color, 0.7);
    padding: 4px;
}

$vertical-gap: 8px;
%vertical-spacing {
    margin-bottom: $vertical-gap;
}

%help-text {
    font-weight: normal;
    color: #555;
}

.list-item {
    border: 1px solid $border-default-color;

    .vertical-spacing {
        @extend %vertical-spacing;
    }

    .info-section {
        @extend %info-section;
    }

    $spacing-top: 6px;
    $spacing-right: 10px;
    $spacing-bottom: 6px;
    $spacing-left: 8px;
    .padded {
        padding: $spacing-top $spacing-right $spacing-bottom $spacing-left;
    }

    .warnings {
        &:not(:empty) {
            padding-top: 4px;
        }
        [class$="messagesmall"] {
            margin: $spacing-top $spacing-right ($spacing-bottom - 4) $spacing-left;
            font-size: 90%;
            &:first-child {
                margin-top: 0px;
            }
            &:last-child {
                margin-bottom: 0px;
            }
        }
    }

    .help-text {
        @extend %help-text;
        font-weight: normal;
        color: #555;
    }

    .selector {
        float: left;
        // always initially hidden and zero width
        display: none;
        width: 32px;
        height: 32px;
        //HACK: neg. on the bottom due to padding-bottom in title-bar - very tweakish
        margin: 0px 0px - ($spacing-bottom) 0px;
        padding: ($spacing-top + 2) 0px 2px ($spacing-left - 1);
        font-size: 80%;
        color: $btn-default-color;
        cursor: pointer;
        vertical-align: middle;
        // prevent text highlight when holding shift to select a range
        @include user-select(none);
    }
    .selector:hover {
        color: maroon;
    }

    .title-bar {
        cursor: pointer;
        outline: none;
        @extend .padded;

        .title {
            display: inline;
            font-weight: bold;
            text-decoration: underline;
            word-wrap: break-word;
            word-break: break-all;
            line-height: 16px;
        }
        //TODO: show keyboard/tab focus for keyboard users
        //&:focus {
        //    color: maroon;
        //}
        .subtitle {
            color: #777;
            font-size: 90%;
            a {
                color: inherit;
            }
        }
        .state-description {
            color: #777;
            font-size: 90%;
            a {
                color: inherit;
            }
        }
    }

    .primary-actions {
        @extend .icon-btn-group;
        float: right;
        margin: $spacing-top $spacing-right 0;
        .icon-btn {
            margin-left: $icon-btn-margin;
        }
    }

    .details {
        display: none;
        padding: 0px $spacing-right $spacing-bottom $spacing-left;
        //TODO: FIXME
        //& > [class$:messagesmall] {
        //    margin: 0px 0px 8px 0px;
        //}

        label {
            margin: 0px;
            padding: 0px;
            font-weight: normal;
        }
        .prompt {
            @extend .help-text;
        }
        .prompt:after {
            content: ":";
            margin-right: 4px;
        }
    }
}

// ---------------------------------------------------------------------------- generic panel list (of list-items)
.list-panel {
    overflow: hidden;
    // overflow-x: hidden;

    .vertical-spacing {
        @extend %vertical-spacing;
    }

    .controls {
        & > *:not(:empty) {
            margin-bottom: 8px;
        }
        .name {
            word-wrap: break-word;
            font-weight: bold;
            input {
                width: 100%;
                // keep the text in position
                margin: -3px 0px -3px -3px;
                font-weight: bold;
            }
        }
        .subtitle {
            color: #777;
            font-size: 90%;
            a {
                color: inherit;
            }
        }
        .editable-text {
            border: solid transparent 1px;
        }
        .editable-text:hover {
            cursor: pointer;
            border: 1px dotted #999999;
        }

        .actions {
            @extend .icon-btn-group;
            float: right;
            .icon-btn {
                margin-left: $icon-btn-margin;
            }
        }
        .messages {
            @include clearfix();
            [class$="message"],
            [class$="messagesmall"] {
                margin: 0px;
                &:not(:last-child) {
                    margin-bottom: 8px;
                }
            }
        }
        .list-actions {
            display: none;
            @extend .clear;
            .btn {
                padding-top: 2px;
                padding-bottom: 2px;
                font-size: 90%;
            }
            .list-action-menu {
                float: right;
            }
        }
    }
    // display only a top border on all but the last
    .list-items {
        margin: 0;
        padding: 0;

        .list-item {
            border-width: 1px 0px 1px 0px;
            &:not(:last-child) {
                border-bottom-width: 0px;
            }
        }
    }
    .empty-message {
        display: none;
        margin: 0px;
    }
}

// ---------------------------------------------------------------------------- a list panel nested inside a list-item
.list-item .details .list-panel {
    margin-top: 8px;
    border-radius: 3px;
    background: white;
    padding: 4px;
    .list-items {
        border: 1px solid $border-default-color;
        border-radius: 3px;
        .list-item {
            &:first-child {
                border-top-width: 0px;
                border-radius: 3px 3px 0px 0px;
            }
            &:last-child {
                border-bottom-width: 0px;
                border-radius: 0px 0px 3px 3px;
            }
        }
    }
}
